
// 图片预览组件，支持旋转，放大缩小，下载 :closable="false"
<template>
  <a-modal v-drag-modal
    class="picPreview"
    title="拖动窗口"
    :width="width"
    :visible="imgListShow"
    @cancel="imageClose"
    :destroyOnClose="true"
    :bodyStyle="moduleCenter"
  >
    <div id="test_3" @mousemove="move" @mouseup="stop" @mouseleave="mouseLeave">
      <img @mousedown="start" :src="furl" ref="singleImg" class="originStyle" />
    </div>

    <template slot="footer">
      <div class="allImg"  v-show="imgList.length>1">
        <a-button  @click="handleCurrentChange(-1)" class="changeImg">
          <a-icon type="left" />
        </a-button>
        <div class="imgbox" :class="imgList.length>6?'':'min'" ref="imgbox">
          <img
            v-for="(item,index) in imgList"
            :key="item"
            :src="item"
            :class="{ changeColor:changeColor == index}"
            @click="handlerImg(item,index)"
          />
        </div>
        <a-button @click="handleCurrentChange(1)" class="changeImg right">
          <a-icon type="left" style="transform: rotate(180deg);" />
        </a-button>
      </div>
      <div class="ctr-box">
       <!-- <a-button class="drag-button" title="移动">
          <a-icon type="build" />
        </a-button>-->
        <a-button @click="resetImage" title="重置">
          <a-icon type="sync" />
        </a-button>
        <a-button @click="rotateL" title="左旋转">
          <a-icon type="redo" />
        </a-button>
        <a-button @click="rotateR" title="右旋转">
          <a-icon type="undo" />
        </a-button>
        <a-button @click="scale(-1)" title="缩小">
          <a-icon type="zoom-out" />
        </a-button>
        <a-button @click="scale(1)" title="放大">
          <a-icon type="zoom-in" />
        </a-button>
        <a-button @click="download" title="下载">
          <a-icon type="download" />
        </a-button>
        <a-button @click="imageClose" title="关闭">
          <a-icon type="close-circle" />
        </a-button>
      </div>
    </template>
  </a-modal>
</template>
<script>
  import { getFileAccessHttpUrl } from '@/api/manage'
  export default {
    name: "PicPreview",
    data() {
      return {
        width:600,
        imgListShow: false,
        num: 0,
        furl: "",
        changeColor: -1,
        currentRotate: 0,
        currentScale: 1,
        canDrag: false,
        offset_x: 0,
        offset_y: 0,
        mouse_x: 0,
        mouse_y: 0,
        moduleCenter: {
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
          height: "600px"
        },
        downUrl: "",
        title:"",
        filePreviewShow:true,
        imgList:[],
        currentImg:"",
        currentIndex:0,
      };
    },

  /*  props: {
      title: {
        //弹框名称
        type: String,
        required: false,
        default: "图片预览"
      },
      filePreviewShow: {
        //是否显示
        type: Boolean,
        required: true,
        default: true
      },
      imgList: {
        //图像数组
        type: Array,
        required: true,
        default: function() {
          return [];
        }
      },
      currentImg: {
        //当前图像
        type: String,
        required: false,
        default: ""
      },
      currentIndex: {
        //当前图像下标
        type: Number,
        required: false,
        default: 0
      }
    },*/
    watch: {
      filePreviewShow(newv) {
        if (newv) {
          this.imgListShow = this.filePreviewShow;
          this.imgList = this.trimSpace(this.imgList);
          if (this.imgList.length === 0) {
            this.furl = "";
            this.changeColor = -1;
          } else {
            this.changeColor = this.currentIndex;
            if (this.currentImg) {
              this.changeColor = this.imgList.findIndex(
                a => a === this.currentImg
              );
            }
            setTimeout(() => {
              this.scrollImg(this.changeColor - 5, this.changeColor < 5);
            }, 500);
            this.furl = this.imgList[this.changeColor];
            this.handlerImg(this.furl, this.changeColor);
          }
        } else {
          this.imgListShow = this.filePreviewShow;
          this.$refs.imgbox.scrollLeft = 0;
          window.removeEventListener("mousewheel", this.handleScroll, true) ||
          window.removeEventListener("DOMMouseScroll", this.handleScroll, true);
        }
      }
    },
    mounted() {
      setTimeout(() => {
        this.scrollImg(this.changeColor - 5, this.changeColor < 5);
      }, 500);
    },

    methods: {
      //重置参数
      reset(text){
        this.imgList = [];
        this.furl = null != text ? text : "";
        this.currentScale = 1;
        this.num = 0;
        this.changeColor = -1;
        this.currentRotate = 0;
        this.canDrag = false;
        this.offset_x = 0;
        this.offset_y = 0;
        this.mouse_x = 0;
        this.mouse_y = 0;
        this.moduleCenter = {
          display: "flex",
            alignItems: "center",
            justifyContent: "center",
            textAlign: "center",
            height: "600px"
        },
        this.downUrl = "";
        this.title = "";
        this.filePreviewShow = true;
        this.currentImg = "";
        this.currentIndex = 0;
      },
      resetImage(){
          this.$nextTick(() => {
            this.reset(this.furl);
            this.rotateScale();
          })
      },
      //打开预览
      imageOpen(text){
        this.$nextTick(() => {
          if(text.indexOf('base64,')==-1){
            this.reset(getFileAccessHttpUrl(text))
          }else{
            this.reset(text)
          }
          this.imgListShow = true;
        })
      },
      //打开多图预览
      imageListOpen(list){
        this.$nextTick(() => {
          this.furl = getFileAccessHttpUrl(list[0]);
          let dataList=[];
          for(let i = 0; i<list.length; i++){
            dataList.push(getFileAccessHttpUrl(list[i]))
          }
          this.imgList = dataList;
          this.imgListShow = true;
        })
      },
      //关闭预览
      imageClose(){
        this.$nextTick(() => {
          this.imgListShow = false;
        })

      },
      trimSpace(array) {
        for (var i = 0; i < array.length; i++) {
          if (
            array[i] == " " ||
            array[i] == null ||
            typeof array[i] == "undefined"
          ) {
            array.splice(i, 1);
            i = i - 1;
          }
        }
        return array;
      },
      //判断滚动方向
      handleScroll(e) {
        this.scale(-e.deltaY);
      },
      //点击图片显示
      handlerImg(furl, index) {
        this.currentRotate = 0;
        this.currentScale = 1;
        this.rotateScale();
        if (this.$refs.singleImg) {
          this.$refs.singleImg.style.left = 0;
          this.$refs.singleImg.style.top = 0;
        }
        this.furl = furl;
        this.changeColor = index;
        if (
          document.getElementsByClassName("originStyle") &&
          document.getElementsByClassName("originStyle")[0] &&
          document.getElementsByClassName("originStyle")[0].style
        ) {
          document.getElementsByClassName("originStyle")[0].style.position =
            "relative";
        }
      },
      handleCurrentChange(val) {
        const changeColor = this.changeColor + val;
        if (changeColor === this.imgList.length || changeColor === -1) {
          return;
        }
        this.currentRotate = 0;
        this.currentScale = 1;
        this.rotateScale();
        this.$refs.singleImg.style.left = 0;
        this.$refs.singleImg.style.top = 0;
        this.furl = this.imgList[changeColor];
        this.changeColor = changeColor;
        const noScroll =
          (val > 0 && changeColor <= 5) ||
          (val < 0 && changeColor + 1 >= this.imgList.length - 5);
        this.scrollImg(val, noScroll);
      },
      scrollImg(val, noScroll) {
        if (noScroll || !this.$refs.imgbox) {
          return;
        }
        this.$refs.imgbox.scrollLeft += 60 * val;
      },
      start(e) {
        //鼠标左键点击
        e.preventDefault && e.preventDefault(); //去掉图片拖动响应
        if (e.button == 0) {
          this.canDrag = true;
          //获取需要拖动节点的坐标
          this.offset_x = document.getElementsByClassName(
            "originStyle"
          )[0].offsetLeft; //x坐标
          this.offset_y = document.getElementsByClassName(
            "originStyle"
          )[0].offsetTop; //y坐标
          //获取当前鼠标的坐标
          this.mouse_x = e.pageX;
          this.mouse_y = e.pageY;
        }
      },
      move(e) {
        e.preventDefault && e.preventDefault();
        window.addEventListener("mousewheel", this.handleScroll, true) ||
        window.addEventListener("DOMMouseScroll", this.handleScroll, false);
        if (this.canDrag == true) {
          let _x = e.pageX - this.mouse_x;
          let _y = e.pageY - this.mouse_y;
          //设置移动后的元素坐标
          let now_x = this.offset_x + _x + "px";
          let now_y = this.offset_y + _y + "px";
          document.getElementsByClassName("originStyle")[0].style.position =
            "absolute";
          document.getElementsByClassName("originStyle")[0].style.top = now_y;
          document.getElementsByClassName("originStyle")[0].style.left = now_x;
        }
      },
      mouseLeave(e) {
        this.canDrag = false;
        window.removeEventListener("mousewheel", this.handleScroll, true) ||
        window.removeEventListener("DOMMouseScroll", this.handleScroll, true);
      },
      stop(e) {
        this.canDrag = false;
      },
      //旋转放大
      rotateScale() {
        if (!this.$refs.singleImg) {
          return;
        }
        this.$refs.singleImg.style.Transform =
          "rotate(" +
          this.currentRotate +
          "deg)" +
          "scale(" +
          this.currentScale +
          ")";
        this.$refs.singleImg.style.webkitTransform =
          "rotate(" +
          this.currentRotate +
          "deg)" +
          "scale(" +
          this.currentScale +
          ")";
        this.$refs.singleImg.style.MozTransform =
          "rotate(" +
          this.currentRotate +
          "deg)" +
          "scale(" +
          this.currentScale +
          ")";
        this.$refs.singleImg.style.msTransform =
          "rotate(" +
          this.currentRotate +
          "deg)" +
          "scale(" +
          this.currentScale +
          ")";
        this.$refs.singleImg.style.transform =
          "rotate(" +
          this.currentRotate +
          "deg)" +
          "scale(" +
          this.currentScale +
          ")";
      },
      //重置
      replace() {
        this.$nextTick(() => {
          this.reset(this.furl);
        })

      },
      //旋转
      rotateL() {
        this.currentRotate += 15;
        this.rotateScale();
      },
      rotateR() {
        this.currentRotate -= 15;
        this.rotateScale();
      },
      //缩放 放大
      scale(type) {
        if (type >= 0) {
          this.currentScale += 0.1;
          this.rotateScale();
        } else {
          this.currentScale -= 0.1;
          if (this.currentScale <= 0.1) {
            this.currentScale = 0.1;
            this.rotateScale();
          } else {
            this.rotateScale();
          }
        }
      },
      downloadIamge(imgsrc, name) {
        //下载图片地址和图片名
        var image = new Image();
        // 解决跨域 Canvas 污染问题
        image.src = imgsrc + "?v=" + Math.random(); // 处理缓存
        image.crossOrigin = "*"; // 支持跨域图片
        image.onload = function() {
          var canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          var context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

          var a = document.createElement("a"); // 生成一个a元素
          var event = new MouseEvent("click"); // 创建一个单击事件
          a.download = name || "img"; // 设置图片名称
          a.href = url; // 将生成的URL设置为a.href属性
          a.dispatchEvent(event); // 触发a的单击事件
        };
      },
      download() {
        this.downloadIamge(this.furl, new Date().getTime());
      }
    }
  };
</script>
<style lang="less" scoped >
  .ant-modal-title{
    cursor: pointer !important;
  }
  .picPreview {
    /deep/ .ant-modal-footer {
      border-top: 0;
      .allImg {
        width: 100%;
        height: 60px;
        margin-bottom: 10px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        .changeImg {
          height: 100%;
          width: 50px;
          cursor: pointer;
          padding: 0;
          border: 0;
          i {
            font-size: 60px;
          }
          &.right {
            i {
              bottom: 2px;
              right: 7px;
              position: relative;
            }
          }
        }
        .imgbox {
          width: 370px;
          height: 100%;
          overflow: hidden;
          margin: 0 auto;
          border: 1px solid #eee;
          display: flex;
          align-items: center;
          justify-content: start;
          &.min {
            justify-content: center;
          }
          img {
            width: 50px;
            height: 50px;
            margin: 5px;
            cursor: pointer;
          }
          .changeColor {
            border: 2px solid #42b983;
          }
        }
      }
      .ctr-box {
        display: flex;
        justify-content: center;
        align-content: center;
        //固定底部
      /*  height: 100px;
        width: 100%;
        position: fixed;
        bottom: 0;*/
      }
    }

    /deep/ .ant-modal-body {

      height: 70vh !important;
      padding: 0px;
      .originStyle {
        // position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        // transform-origin: 50% 50%;
      }
      #test_3 {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        /*border: 1px solid #eeeeee;*/
        // overflow: scroll;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          cursor: move;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
/*  /deep/ .ant-modal-content{
    box-shadow: none;
    height:600px;
    background-color: rgba(0,0,0,0);
  }
  /deep/ .anticon{
    color: #FFFFFf;
  }
  /deep/ .ant-btn{
       background-color: rgba(0,0,0,0);
    }
    .ant-btn:hover{
    background-color: rgba(0,0,0,0);
    }
  .ant-btn:focus{
    background-color: rgba(0,0,0,0);
  }
  /deep/ .ant-modal-close-x{
    border: 1px solid #ffffff;
    width: 35px;
    height: 35px;
    font-size: 16px;
    font-style: normal;
    line-height: 35px;
}*/
</style>